import { Container } from "./index";
import { getById } from "@/utils/index.ts";
import { cloneDeep } from "lodash";
import MonacoEditor from "@/components/MonacoEditor/monacoEditor.vue";
import {
  Input,
  InputNumber,
  Select,
  SelectOptionData,
  SelectOptionGroup,
  Switch,
  Textarea,
} from "@arco-design/web-vue";
interface Definition {
  model?: any;
  type:
    | "string"
    | "array"
    | "object"
    | "boolean"
    | "number"
    | "date"
    | "function";
  label: string;
  help?: string;
  options?: (
    | string
    | number
    | boolean
    | SelectOptionData
    | SelectOptionGroup
  )[];
  placeholder?: string;
  defaultValue: any;
}
type DefinitioType = (config: Definition) => void;
/**
 * 绑定表单name
 * @param config
 * @returns
 */
export const definitionFormNameId: DefinitioType = (config) => {
  config.model = () => {
    return <Input></Input>;
  };
  config.defaultValue = config.defaultValue || getById();
  return config;
};
/**
 * 输入框
 * @param config
 * @returns
 */
export const definitionInput: DefinitioType = (config) => {
  config.model = () => {
    return <Input></Input>;
  };
  return config;
};
/**
 * 文本域
 * @param config
 * @returns
 */
export const definitionTextarea: DefinitioType = (config) => {
  config.model = () => {
    return <Textarea></Textarea>;
  };
  return config;
};
/**
 * 数字输入框
 * @param config
 * @returns
 */
export const definitionNumber: DefinitioType = (config) => {
  config.model = () => {
    return <InputNumber></InputNumber>;
  };
  return config;
};
/**
 * 选择框
 * @param config
 * @returns
 */
export const definitionSelect: DefinitioType = (config) => {
  config.model = () => {
    return <Select options={config.options}></Select>;
  };

  return config;
};
/**
 * 开关
 * @param config
 * @returns
 */
export const definitionSwitch: DefinitioType = (config) => {
  config.model = () => {
    return <Switch></Switch>;
  };

  return config;
};
export const definitionMonacoEditor: DefinitioType = (config) => {
  config.model = () => {
    return <MonacoEditor type={config.type}></MonacoEditor>;
  };
  return config;
};
export const definitionEvent: DefinitioType = (config) => {
  return config;
};
//组件数据转换
export const customComponent = (configInit: Container) => {
  const config: Container = cloneDeep(configInit);
  const getProperty = (
    data: {
      [key: string]: Definition;
    },
    CallBack
  ) => {
    let obj = {};
    Object.keys(data).forEach((key) => {
      obj[key] = data[key].defaultValue;
    });
    CallBack(obj);
  };

  // 组件属性
  if (config.props) {
    getProperty(config.props, (obj) => {
      config.props = obj;
    });
  }
  // 表单属性
  if (config.formItem) {
    getProperty(config.formItem, (obj) => {
      config.formItem = obj;
    });
  }
  // 模块事件
  if (config.events) {
    getProperty(config.events, (obj) => {
      config.events = obj;
    });
  }
  // 栅格
  if (config.grid) {
    config.grid = {
      span: 24,
      offset: 0,
    };
  }
  return {
    ...config,
    id: config.id ? config.id : getById(),
  };
};
